<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="hd">
      <view class="font">余额</view>
      <view class="money">
        <view class="number">{{ userInfo.coin }}</view>
        <view class="label">投研币</view>
      </view>
    </view>
    <view class="list">
      <view class="item" :class="{active: active == item.id}" v-for="(item,index) in list" :key="index" @click="getMoney(item)">
        <view class="inte">{{ item.coin }}</view>
        <view class="sum">¥{{ Number(item.price) }}</view>
      </view>
      <view class="item pd10">
        <view class="custom">
          <uv-input :placeholder="placeholder" border="none" v-model="money" fontSize='28rpx' color='#000' inputAlign='center' placeholderStyle='font-size: 28rpx;color: #000;text-align: center;' @blur='blur' @focus='focus'></uv-input>
        </view>
      </view>
    </view>
    <view class="pay">
      <view class="item" v-for="(item,index) in payList" :key="index" @click="payActive = item.id">
        <view class="left">
          <view class="icon">
            <image :src="`../../../static/${item.img}.png`" class="img"></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="right">
          <image src="../../../static/radio-on.png" class="img" v-if="payActive == item.id"></image>
          <image src="../../../static/radio-off.png" class="img" v-else></image>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="keyUp">充值</button>
      <view class="protocol">
        <protocol-box :agree='agree' :protocol="[{name: '《付款及退款规则》', id: '8'}]" @click="agree = !agree"></protocol-box>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { post } from '@/api';
import { toast, getUser, checkServe } from '@/common';
import { useUser } from '@/store';

let placeholder = ref('自定义金额');
let list = ref([]);
let active = ref('');
let money = ref('');
let payList = [{name: '微信', img: 'wxPay', id: 1, value: 'wxpay'}, {name: '支付宝', img: 'aliPay', id: 2, value: 'alipay'}];
let payActive = ref(2);
let agree = ref(false);
let myMoney = 0; // 临时储存的金额
let succeed = ref('');
let error = ref('');

const userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});

onLoad(() => {
  getUser();
  getList();
})

function keyUp(){
  if(!agree.value) return toast('请先同意服务协议');
  if(!myMoney) return toast('请选择要充值的金额');
  // if(payActive.value == 1) return toast('微信支付开发中...');
  
  const obj = payList.find(o => o.id == payActive.value);
  
  function setPay(){
    const params = {
      amount: myMoney,
      pay_type: payActive.value
    }
    post('api/recharge_config/userRechargeCoin', params).then(e => {
      if(e.code == 1){
        const { data } = e.data;
        // 开始支付
        uni.requestPayment({
          provider: obj.value,
          orderInfo: data,
          success: function (res) {
            getUser();
            toast('支付成功');
          },
          fail: function (err) {
            toast('支付失败');
          }
        });
      }
    })
  }
  checkServe('payment', obj.value, setPay);
}
function getPay(){
  return new Promise((resolve, reject) => {
    const params = {
      amount: myMoney,
      pay_type: payActive.value
    }
    post('api/recharge_config/userRechargeCoin', params).then(res => {
      if(res.code == 1){
        const { data } = res.data;
        resolve(data);
      }else{
        reject(false);
      }
    })
  })
}
function getList(){
  post('api/recharge_config/getRechargeConfigList').then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data;
    }
  })
}

function getMoney(row){
  placeholder.value = '自定义金额';
  money.value = '';
  active.value = row.id;
  myMoney = Number(row.price).toString().slice();
  console.log(myMoney);
}
function blur(){
  if(!money.value){
    placeholder.value = '自定义金额';
  }
  myMoney = money.value.slice();
  console.log(myMoney);
}
function focus(){
  placeholder.value = '';
  active.value = '';
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 100rpx;
    .protocol{
      padding-top: 30rpx;
    }
    .btn{
      font-size: 28rpx;
      line-height: 72rpx;
      height: 72rpx;
      width: 374rpx;
      margin: 0 auto;
    }
  }
  .pay{
    padding: 0 30rpx;
    padding-top: 60rpx;
    .item{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 0;
      .right{
        width: 22rpx;
        height: 22rpx;
        font-size: 0;
      }
      .left{
        display: flex;
        align-items: center;
        .icon{
          width: 40rpx;
          height: 40rpx;
          font-size: 0;
        }
        .name{
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          padding-left: 30rpx;
        }
      }
    }
  }
  .list{
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 50rpx;
    .item{
      border: 1rpx solid #EBEBEB;
      border-radius: 11rpx;
      width: 31%;
      height: 125rpx;
      text-align: center;
      padding: 0 34rpx;
      margin-right: 3%;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:nth-of-type(3n){
        margin-right: 0;
      }
      &.active{
        border-color: #E43222;
      }
      &.pd10{
        padding: 0 10rpx;
      }
      .custom{
        :deep(.uv-input){
          .uv-input__content__prefix-icon{
            display: none;
          }
        }
      }
      .sum{
        color: rgba($color: #979797, $alpha: .9);
        font-size: 28rpx;
        padding-top: 6rpx;
      }
      .inte{
        font-size: 40rpx;
        color: #000000;
        padding-bottom: 6rpx;
        border-bottom: 1px solid rgba($color: #979797, $alpha: .2);
      }
    }
  }
  .hd{
    padding: 0 30rpx;
    padding-top: 60rpx;
    .money{
      padding-top: 24rpx;
      display: flex;
      align-items: flex-end;
      .label{
        font-weight: 400;
        font-size: 26rpx;
        color: #959595;
        padding-left: 18rpx;
        padding-bottom: 10rpx;
      }
      .number{
        font-size: 60rpx;
        color: #E43222;
      }
    }
    .font{
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F5F5F5;
  }
</style>